<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style: none;
      }

      a {
        display: block;
        text-decoration: none;
        color: #3c3c3c;
      }

      #nav {
        text-align: center;
        color: blue;
        margin: 50px 0;
      }

      #wrap {
        width: 660px;
        height: 660px;
        border: 2px solid red;
        margin: 0 auto;
        overflow: hidden;
        border-radius: 10px;
      }

      #wrap li {
        float: left;
        width: 200px;
        height: 200px;
        margin: 10px;
        border-radius: 10px;
        background-color: #f1f2f3;
      }

      #wrap li img {
        width: 200px;
        height: 130px;
        border-radius: 10px;
      }

      #wrap li p {
        margin: 5px 0;
      }
    </style>
  </head>
  <body>
    <h2 id="nav">请选择角色</h2>
    <ul id="wrap">
      <!-- <li>
				<a href="">
					<img src="./img/22.jpg" alt="" />
					<p>类型：萌系女朋友</p>
					<p>特点：可爱、漂亮、粘人</p>
				</a>
			</li>
			<li>
				<a href="">
					<img src="./img/22.jpg" alt="" />
					<p>类型：萌系女朋友</p>
					<p>特点：可爱、漂亮、粘人</p>
				</a>
			</li>
			<li>
				<a href="">
					<img src="./img/22.jpg" alt="" />
					<p>类型：萌系女朋友</p>
					<p>特点：可爱、漂亮、粘人</p>
				</a>
			</li>
			<li>
				<a href="">
					<img src="./img/22.jpg" alt="" />
					<p>类型：萌系女朋友</p>
					<p>特点：可爱、漂亮、粘人</p>
				</a>
			</li>
			<li>
				<a href="">
					<img src="./img/22.jpg" alt="" />
					<p>类型：萌系女朋友</p>
					<p>特点：可爱、漂亮、粘人</p>
				</a>
			</li>
			<li>
				<a href="">
					<img src="./img/22.jpg" alt="" />
					<p>类型：萌系女朋友</p>
					<p>特点：可爱、漂亮、粘人</p>
				</a>
			</li>
			<li>
				<a href="">
					<img src="./img/22.jpg" alt="" />
					<p>类型：萌系女朋友</p>
					<p>特点：可爱、漂亮、粘人</p>
				</a>
			</li>
			<li>
				<a href="">
					<img src="./img/22.jpg" alt="" />
					<p>类型：萌系女朋友</p>
					<p>特点：可爱、漂亮、粘人</p>
				</a>
			</li>
			<li>
				<a href="">
					<img src="./img/22.jpg" alt="" />
					<p>类型：萌系女朋友</p>
					<p>特点：可爱、漂亮、粘人</p>
				</a>
			</li> -->
    </ul>
    <script>
      //获取所需元素
      var wrap = document.getElementById("wrap");
      //虚拟数据
      var data = [
        {
          Id: 1,
          ImgPath: "../img/avatar.png",
          Sort: "萌系",
          Trait: "可爱、粘人、漂亮",
        },
        {
          Id: 2,
          ImgPath: "../img/avatar.png",
          Sort: "萌系",
          Trait: "可爱、粘人、漂亮",
        },
        {
          Id: 3,
          ImgPath: "../img/avatar.png",
          Sort: "御姐",
          Trait: "漂亮",
        },
        {
          Id: 4,
          ImgPath: "../img/avatar.png",
          Sort: "御姐",
          Trait: "漂亮",
        },
        {
          Id: 5,
          ImgPath: "../img/avatar.png",
          Sort: "御姐",
          Trait: "漂亮",
        },
        {
          Id: 6,
          ImgPath: "../img/avatar.png",
          Sort: "御姐",
          Trait: "漂亮",
        },
        {
          Id: 7,
          ImgPath: "../img/avatar.png",
          Sort: "御姐",
          Trait: "漂亮",
        },
        {
          Id: 8,
          ImgPath: "../img/avatar.png",
          Sort: "御姐",
          Trait: "漂亮",
        },
        {
          Id: 9,
          ImgPath: "../img/avatar.png",
          Sort: "御姐",
          Trait: "漂亮",
        },
      ];

      //初始值
      var content = "";
      //遍历渲染
      for (var i = 0; i < data.length; i++) {
        content += `
							<li>
								<a href="bom-case-detail.html?Id=${data[i].Id}&ImgPath=${data[i].ImgPath}&Sort=${data[i].Sort}&Trait=${data[i].Trait}">
									<img src="${data[i].ImgPath}" alt="" />
									<p>类型：${data[i].Sort}</p>
									<p>特点：${data[i].Trait}</p>
								</a>
							</li>
						   `;
      }
      //赋值给wrap
      wrap.innerHTML = content;
    </script>
  </body>
</html>
